<!--
 * @Description: 技术栈
 * @Author: ZhangHan
 * @Date: 2025-07-24 17:50:34
 * @LastEditTime: 2025-09-16 08:49:37
 * @LastEditors: ZhangHan
-->
<template>
  <view>
    <!-- 动画过渡组件 -->
    <uni-transition
      custom-class="transition"
      :mode-class="modeClass"
      :show="showCollapse"
    >
      <uni-collapse v-model="active" :accordion="true">
        <uni-collapse-item v-for="(item, index) in dataSourceList" :key="index">
          <template #title>
            <view class="tech-header">
              <view :class="['tech-icon', item.iconClass]">{{
                item.icon
              }}</view>
              <view class="tech-title">{{ item.name }}</view>
            </view>
          </template>
          <view class="content">
            <view class="tech-description">{{ item.desc }}</view>
            <view class="features">
              <uni-tag
                :circle="true"
                :size="'normal'"
                v-for="(val, idx) in item.tags"
                :key="idx"
                :text="val"
              />
            </view>
          </view>
        </uni-collapse-item>
      </uni-collapse>
    </uni-transition>
    <view class="test_btn" @click="showPopup">测试点击下载图片</view>
    <view class="test_btn" @longpress="showPopup">测试长按下载图片</view>
    <view class="test_btn" @click="handlePreviewPdf">点击测试预览pdf</view>
    <button class="test_btn" @click="handleGetLocation">
      点击测试获取地理位置
    </button>
    <view class="test_btn" @click="handleCJ">测试富文本编辑器</view>
    <view class="test_btn" @click="handleMap(1)">跳转地图组件</view>
    <view class="test_btn" @click="handleMap(2)">跳转地图拖拽组件</view>
    <view class="test_btn" @click="handleCanvas(1)">跳转测试canvas</view>
    <view class="test_btn" @click="handleCanvas(2)">跳转测试canvas2</view>

    <scroll-view
      :scroll-with-animation="true"
      class="scrollContainer"
      :scrollX="true"
      :scroll-into-view="scrollIntoViewId"
      ref="scrollViewRef"
      scroll-left="0"
    >
      <view
        :id="`scroll${index}`"
        class="s_item"
        v-for="(item, index) in scrollList"
        :key="index"
        @click="handleScrollTo(index)"
        >{{ `滚动` + item }}</view
      >
    </scroll-view>

    <ProFloatBtn :func="handleClick" :position="'btRight'" />
    <!-- 下载提示弹窗 -->
    <uni-popup ref="popup" type="dialog">
      <uni-popup-dialog
        type="info"
        title="提示"
        content="确定要下载此图片吗？"
        :before-close="true"
        @confirm="confirmDownload"
        @close="cancelDownload"
      ></uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script setup lang="ts">
import { dataSourceList, scrollList } from "./dataSource";
import { reactive, ref } from "vue";
// import { ProFloatBtn } from "@/components/index";
import ProFloatBtn from "@/components/ProFloatBtn/ProFloatBtn.vue";
import { IMG_ALL } from "@/concacts/imgPath";
import { downloadPic, downloadImageH5 } from "@/utils/common";
import { throttle, wxOpenPdf } from "@/utils/common";
import PDFPATH from "@/static/pdf/testpdf.pdf";
import { useGo } from "@/hooks/usePage";
import { ROUTER_PATH } from "@/concacts/routerPath";

const go = useGo();
const active = ref();
const showCollapse = ref(true);
const modeClass = ref("fade");
const popup = ref();
const scrollIntoViewId = ref("");
const scrollViewRef = ref<any>(null);

const imgInfo = IMG_ALL.DUMMY; // 替换为你的图片URL

//按钮点击事件
const handleClick = () => {
  //展示技术栈列表
  showCollapse.value = !showCollapse.value;
};

//激活弹框
const showPopup = () => {
  popup.value.open();
};

//取消弹框
const cancelDownload = () => {
  popup.value.close();
};

//确定下载弹框
const confirmDownload = () => {
  try {
    // #ifdef MP-WEIXIN
    downloadPic(imgInfo);
    // #endif
    // #ifdef H5
    downloadImageH5(imgInfo);
    // #endif
    popup.value.close();
  } catch (e) {
    console.log(e);
    popup.value.close();
  } finally {
    popup.value.close();
  }
};

//pdf预览
const handlePreviewPdf = throttle(() => {
  // #ifdef MP-WEIXIN
  wxOpenPdf(PDFPATH);
  // #endif

  // #ifdef H5
  go(ROUTER_PATH.PDFIFRANE + `?data=${JSON.stringify(PDFPATH)}`);
  // #endif
}, 1000);

const handleCJ = () => {
  go(ROUTER_PATH.CONTENTEXT);
};

//获取当前地理位置
const handleGetLocation = () => {

  uni.getLocation({
    type: "wgs84",
    success: function (res) {
      console.log("当前位置的经度：" + res.longitude);
      console.log("当前位置的纬度：" + res.latitude);
    },
    fail: function (err) {
      console.log("获取位置失败" + err);
    },
    complete: function () {
      console.log("获取位置结束");
    },
  });
};

// 滚动到指定位置的方法
const handleScrollTo = throttle((index: number) => {
  // 方法1：使用scroll-into-view
  scrollIntoViewId.value = `scroll${index}`;
}, 500);

//跳转地图
const handleMap = (num: number) => {
  // #ifdef MP-WEIXIN
  go(num == 1 ? ROUTER_PATH.MYMAP : ROUTER_PATH.MAPSECOND);
  // #endif

  // #ifdef H5
  uni.showToast({
    title: "H5端暂未申请地图权限",
    icon: "error",
    duration: 1500,
  });
  // #endif
};

//跳转测试canvas
const handleCanvas = (type: number) => {
  go(type === 1 ? ROUTER_PATH.TEXTCANVAS : ROUTER_PATH.SECONDCANVAS);
};
</script>

<style scoped lang="scss">
@use "./index.scss";
</style>
